<template>
  <div class="app-container">
    <h2 style="text-align:center;">发布新课程</h2>
    <el-steps
      :active="2"
      process-status="wait"
      align-center
      style="margin-bottom:40px;"
    >
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>
    <el-button type="text" @click="chapterDialogVisible = true"
      >添加章节</el-button
    >
    <!-- 章节 -->
    <ul class="chapterList">
      <li v-for="item in chapterList" :key="item.id">
        <p>
          {{ item.title }}
          <span class="acts">
            <el-button type="text" @click="addChapter(item)"
              >添加小节</el-button
            >
            <el-button type="text" @click="editChapter(item)">修改</el-button>
            <el-button type="text">删除</el-button>
          </span>
        </p>

        <!-- 视频 -->
        <ul class="chapterList videoList">
          <li v-for="subitem in item.children" :key="subitem.id">
            <p>
              {{ subitem.title }}
              <span class="acts">
                <el-button type="text" @click="editVideo(subitem)"
                  >编辑</el-button
                >
                <el-button type="text" @click="del(subitem.id)">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <div>
      <el-button type="primary" @click="previous">上一步</el-button>
      <el-button @click="next">下一步</el-button>
    </div>
    <!-- 添加/修改章节对话框 -->
    <el-dialog
      :title="chapterMode === 'add' ? '添加章节' : '修改章节'"
      :visible.sync="chapterDialogVisible"
      width="40%"
    >
      <el-form ref="form" :model="chapterForm" label-width="80px">
        <el-form-item label="章节标题">
          <el-input
            v-model="chapterForm.title"
            placeholder="请输入章节标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number
            v-model="chapterForm.sort"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="chapterDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="chapterSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加章节对应的小节 -->
    <el-dialog
      :title="videoMode === 'add' ? '添加课时' : '修改课时'"
      :visible.sync="videoDialogVisible"
      width="40%"
    >
      <el-form :model="videoForm" ref="form" label-width="80px">
        <el-form-item label="课时标题">
          <el-input
            v-model="videoForm.title"
            placeholder="请输入课时标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="课时排序">
          <el-input-number
            v-model="videoForm.sort"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="videoForm.isFree">
            <el-radio :label="false">收费</el-radio>
            <el-radio :label="true">免费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <el-upload
            class="upload-demo"
            :action="BASE_API + '/eduvod/video/upload'"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">
                最大支持1G，<br />
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br />
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br />
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br />
                SWF、TS、VOB、WMV、WEBM 等视频格式上传
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="videoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="videoSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllChapterVideo,
  addChapter,
  getChapterById,
  updateChapter
} from '@/api/edu/chapter'
import { removeVideo } from '@/api/edu/vod'
import { addVideo, getVideo, updateVideo, deleteVideo } from '@/api/edu/video'
export default {
  name: 'Chapter',
  data() {
    return {
      chapterList: [], // 章节列表
      chapterMode: 'add', // 章节操作模式
      chapterDialogVisible: false, // 章节会话框
      chapterForm: {
        courseId: this.$route.params.id, // 课程id
        title: '', // 标题
        sort: 0 // 排序
      },
      videoMode: 'add', // 小节操作模式
      videoDialogVisible: false, // 小节会话框
      videoForm: {
        title: '', // 标题
        sort: '', // 排序
        isFree: true, // 是否免费
        videoSourceId: '', // 云端视频资源
        videoOriginalName: '' // 原始文件名称
      },
      BASE_API: process.env.VUE_APP_BASE_API, // 基准路径
      fileList: []
    }
  },
  created() {
    this.getAllChapterVideoListData()
  },
  methods: {
    // 根据课程id，获取该课程的所有章节和所有小节
    async getAllChapterVideoListData() {
      const res = await getAllChapterVideo(this.$route.params.id)

      this.chapterList = res.data.list
    },
    // 添加/修改章节
    async chapterSubmit() {
      let res = null
      if (this.chapterMode === 'add') {
        res = await addChapter(this.chapterForm)
      } else {
        res = await updateChapter(this.chapterForm)
      }

      if (res.code === 20000) {
        // 提示
        this.$message({
          type: 'success',
          message:
            this.chapterMode === 'add' ? '添加章节成功~' : '修改章节成功~'
        })

        // 关闭对话框
        this.chapterDialogVisible = false

        // 重新查询
        this.getAllChapterVideoListData()
      }
    },
    async editChapter(item) {
      const res = await getChapterById(item.id)

      this.chapterForm = {
        id: res.data.chapter.id, // id 章节id
        courseId: this.$route.params.id, // 课程id
        title: res.data.chapter.title, // 标题
        sort: res.data.chapter.sort // 排序
      }
      this.chapterMode = 'edit'

      this.chapterDialogVisible = true
    },
    // 添加小节
    addChapter(item) {
      this.videoForm.courseId = this.$route.params.id
      this.videoForm.chapterId = item.id

      this.videoDialogVisible = true
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      this.videoForm.videoSourceId = res.data.videoId

      this.videoForm.videoOriginalName = file.name
    },
    async handleRemove(file, fileList) {
      const res = await removeVideo(this.videoForm.videoSourceId)

      if (res.code === 20000) {
        this.videoForm.videoSourceId = ''
        this.videoForm.videoOriginalName = ''
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    async editVideo(item) {
      const res = await getVideo(item.id)

      this.videoForm = {
        id: res.data.video.id, // 小节id
        courseId: res.data.video.courseId, // 课程id
        chapterId: res.data.video.chapterId, // 章节id
        title: res.data.video.title, // 标题
        sort: res.data.video.sort, // 排序
        isFree: res.data.video.isFree, // 是否免费
        videoSourceId: res.data.video.videoSourceId, // 云端视频资源
        videoOriginalName: res.data.video.videoOriginalName // 原始文件名称
      }

      // 修改
      this.videoMode = 'edit'

      this.videoDialogVisible = true
    },
    // 课时新增/修改
    async videoSubmit() {
      let res = null
      if (this.videoMode === 'add') {
        res = await addVideo(this.videoForm)
      } else {
        res = await updateVideo(this.videoForm)
      }

      if (res.code === 20000) {
        // 提示
        this.$message({
          type: 'success',
          message: this.videoMode === 'add' ? '添加课时成功~' : '修改课时成功~'
        })

        // 关闭对话框
        this.videoDialogVisible = false

        // 重新查询
        this.getAllChapterVideoListData()
      }
    },
    del(id) {
      this.$confirm('确定删除该课时吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteVideo(id)
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功~'
            })

            this.getAllChapterVideoListData()
          }
        })
        .catch(() => {})
    },
    previous() {
      this.$router.push('/edu/course/info/1262697056866586625')
    },
    next() {
      this.$router.push('/edu/course/publish/1')
    }
  }
}
</script>
<style scoped>
.chapterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chapterList li {
  position: relative;
}
.chapterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chapterList .acts {
  float: right;
  font-size: 14px;
}

.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>
